<template>
    <doc-main>
        <div class="container-fluid">
            <h4>选择</h4>
            <h5>概述</h5>
            <p>单一的选择模式</p>
            <h5>如何使用:</h5>
            <p>使用 <code>SelectorI</code> 组件的示例代码：</p>
            <h5>Code</h5>
            <code-parsing language="html js hljs javascript">{{code}}</code-parsing>
            <h5>效果:</h5>
            <div class="col-lg-4">
                <md-selector :data="data" v-model="value" :search="search" id="selector"/>
                <div>选择：{{value}}</div>
            </div>
            <div class="m-t-25">
                <h5>参数</h5>
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>属性</th>
                        <th>说明</th>
                        <th>类型</th>
                        <th>默认值</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>id</td>
                        <td>必须传入</td>
                        <td>String</td>
                        <td>-</td>
                    </tr>
                    <tr>
                        <td>data</td>
                        <td>选择的数据 {label: **, id: Number}</td>
                        <td>Array</td>
                        <td>-</td>
                    </tr>
                    <tr>
                        <td>search</td>
                        <td>搜索回掉</td>
                        <td>Function</td>
                        <td>-</td>
                    </tr>
                    <tr>
                        <td>disabled</td>
                        <td>禁用</td>
                        <td>Boolean</td>
                        <td>false</td>
                    </tr>
                    <tr>
                        <td>placeholder</td>
                        <td>placeholder</td>
                        <td>String</td>
                        <td>false</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </doc-main>
</template>

<script>
    import DocMain from '../layout/DocMain.vue';
    import MdSelector from '../../../js/components/select/Selector.vue';
    import CodeParsing from '../layout/CodeParsing';
    import {selector} from '../../html/data';

    export default {
        components: {
            CodeParsing,
            MdSelector,
            DocMain
        },
        data () {
            return {
                data: [
                    {value: 12, label: '12'},
                    {value: 13, label: '13'},
                    {value: 14, label: '14'}
                ],
                value: {},
                code: selector
            };
        },
        watch: {
            value (n) {
                console.info(n);
            }
        },
        methods: {
            search (val) {
                console.log(val);
            }
        }
    };
</script>

<style>

</style>
